<template>
  <div>
    <!-- A crash course -->
    <div
      data-test="todo"
      v-for="d in todos"
      :key="d.id"
      :class="[d.completed ? 'completed' : '']"
    >
      {{ d.text }}

      <input
        data-test="todo-checkbox"
        type="checkbox"
        v-model="d.completed"
      />
    </div>

    <form data-test="form" @submit.prevent="createTodo">
      <input data-test="new-todo" type="text" v-model="newTodo" />
    </form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';

defineOptions({ name: 'TodoApp' });

const todos = reactive([
  {
    id: 1,
    text: 'Learn Vue.js 3',
    completed: false,
  },
]);

const newTodo = ref('');

const createTodo = () => {
  todos.push({
    id: 2,
    text: newTodo.value,
    completed: false,
  });
};
</script>

<style scoped></style>
